/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.diy-time-enter-active {
  transition: all .3s ease;
}

.diy-time-leave-active {
  transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}

.diy-time-enter, .diy-time-leave-to
  /* .slide-fade-leave-active for below version 2.1.8 */
{
  transform: translateX(10px);
  opacity: 0;
}

.container:after, .content:after, .card-header:after, .card-total:after, .card-ratio:after {
  clear: both;
  display: table;
  content: '';
}

.container{
  margin-bottom: 20px;
}
.page-title{
  margin-bottom: 0!important;
  h2{
    border-bottom: 1px solid #EDEDED!important;
  }
}
.layout .content-wrapper .content .content{
  padding-bottom:10px;
}
.search-content {
  padding: 10px 20px 6px 20px !important;
  display: flex;
  //justify-content: center;
  align-items: center;
  margin-bottom: 0!important;
}

.search-company {
  width: 100%;
  min-width: 420px;
  height: 40px;

  ::v-deep.el-form {
    width: 100% !important;
    float: right;
    display: unset;

    .el-form-item {
      max-width: 215px;
      min-width: 160px;

      .el-form-item__content {
        width: 100%;

        .el-cascader {
          //max-width: 215px;
        }

        .el-date-editor {
          .el-range-separator {
            font-weight: 100;
            color: #606266;
          }
        }
      }

      &:last-child {
        margin-right: 0;
      }
    }

    .company {
      width: 190px;
    }
  }
}

.base-data-list {
  display: flex;
  flex-wrap: wrap;
  min-width: calc(275px * 4);
}

.base-data-list .base-data-item {
  //flex: 1;
  width: calc(25% - 53px);
  min-width: 275px;
  margin-bottom: 10px;
}

.table-content {
  //display: flex;
  background-color: #f5f5f5 !important;
  padding: 0 !important;
}

.table-content-item {
  //flex: 1;
  margin-right: 10px;
  padding: 20px !important;
  background-color: #ffffff;
  border-radius: 5px;
  width: calc(50% - 50px);
  float: left;

  &:last-child {
    margin-left: 10px;
    margin-right: 0;
  }
}

.staff-button-list {
  width: 60%;
  float: right;
  text-align: right;
  #search-com{
      //width: 710px;
  }
  .search-company{
    //width: calc(100% - 50px)!important;
    width: 425px !important;
    float: right;
  }
  .el-button {
    min-width: 68px;
    width: 68px;
    height: 32px;
    border: none;
    font-size: 16px;

    &:last-child {

      span {
        //justify-content: center;
        //align-items: center;
        color: #4168E7;
        font-weight: bold;
      }
    }
  }

  .download-table {
    font-weight: bold;
    position: relative;
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    border: 2px solid #4168E7;
    overflow: hidden;
    padding: 0;
    //display: flex;
    color: #4168E7;
    font-size: 20px;
    //padding: 0 0 4px 0;
    //&:after {
    //  position: absolute;
    //  content: '';
    //  left: 6px;
    //  bottom: 3px;
    //  width: 16px;
    //  height: 2px;
    //  background-color: #4168E7;
    //}

    &:hover, &:focus {
      color: #ffffff;
      background-color: #4168E7;
    }
  }

  .el-button--primary.is-plain {
    color: #ffffff;
    background-color: #4168E7;
  }

  .el-button--info.is-plain {
    color: #999999;
    background-color: #E8EAEC;
  }

}

//销售总额7天变化趋势
.sale-chart {
  padding: 0 !important;
  background-color: #f5f5f5 !important;

  .sale-chart-left, .sale-chart-right {
    float: left;
    //margin-right: 10px;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 5px;
  }

  .sale-chart-left {
    margin-right: 10px;
    width: calc(100% - 510px);

    .card-header {
      margin-bottom: 18px;
      width: calc(100% - 40px);
      background: #F4F7FC;
      border-radius: 4px;
      padding: 8px 20px;

      .card-total .card-total-left, .card-ratio .card-ratio-left {
        width: 60%;
        float: left;
        position: relative;
      }

      .card-total .card-total-right, .card-ratio .card-ratio-right {
        width: 170px;
        float: right;
        text-align: left;

        span {
          font-size: 16px;
          color: #4168E7;
        }

        label {
          &:first-child {
            font-size: 14px;
            margin-right: 20px;
            font-weight: 400;
            color: #666666;
          }

          &:last-child {
            font-size: 20px;
            font-weight: 400;
            color: #4168E7;
            width: 120px;
          }
        }
      }

      .card-total {
        .card-total-left {
          font-size: 28px;
          font-weight: bold;
          color: #4168E7;

          span {
            font-size: 20px;
          }
        }

        .card-total-right {
        }

      }

      .card-ratio {
        .card-ratio-left, .card-ratio-right {

        }

        .card-ratio-left {
          //background-color: #2D7EDF;
          p {
            height: 28px;
            line-height: 28px;
            padding: 0 20px 0 35px;
            background: #FFFFFF;
            border-radius: 14px;
            display: table;

            .arrow {
              top: 4px;
              left: 8px;
            }
          }
        }

        .card-ratio-right {

        }
      }
    }

    .card-body {
      width: 100%;
    }
  }

  .sale-chart-right {
    width: 420px;
    float: right;
    //padding-bottom: 70px;

    h3 {
      //margin-bottom: 70px;
    }
  }
}

.card-title {
  font-size: 18px;
  font-weight: bold;
  color: #333333;
}

/deep/.el-dialog__body{
  padding: 20px;
  .page{
    padding-right:0;
  }
}
//弹窗下载按钮
.performanceStatistics-download{
  margin-top: 20px;
  width: 120px;
  height: 36px;
  background: #4168E7;
  border-radius: 4px;
  border: none;
  color: #ffffff;
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 20px;
}

.arrow {
  border-radius: 50%;
  overflow: hidden;
  font-size: 14px;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 16px;
  height: 16px;
  padding: 1px;
  transform: scale(1);
  position: absolute;
  top: 2px;
  left: 0;
}

.data-red, .data-green {
  padding-left: 30px;
  font-size: 14px;

  label {
    margin-right: 10px;
  }
}

.data-red {
  color: #F33F3F;

  .south-east {
    //display: block;
    color: #f65b5b;
    background-color: #ffe6e6;
  }

  .north-east {
    display: none;
  }
}

.data-green {
  color: #12AB62;

  .south-east {
    display: none;
  }

  .north-east {
    //display: block;
    color: #2bb473;
    background-color: #daf7e9;
  }
}

.top-mark {
  color: #ffffff;
  font-size: 14px;
  font-weight: bold;
  height: 22px;
  line-height: 22px;
  background-color: #ffc95b;
  display: inline-table;
  margin-left: 25px;
  padding: 0 10px 0 5px;
  font-style: italic;
  text-align: center;
  position: relative;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;

  &:after, &:before {
    content: '';
  }

  &:before {
    position: absolute;
    top: 0;
    left: -20px;
    z-index: 10;
    width: 0;
    height: 0;
    border-top: 11px solid transparent;
    border-right: 20px solid #ffc95b;
    border-bottom: 11px solid transparent;
    content: '';
  }

  &:after {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    position: absolute;
    top: 8px;
    left: -8px;
    z-index: 20;
    background-color: #ffffff;
  }
}

.card-title label i:before, .base-data-item .title label i:before {
  font-weight: 100;
  color: rgba(230,162,60,0.8);
}
